/* ======================================================
   <!-- List Bulleted -->
/* ====================================================== */
@import '@/components/_utils/styles/_variable-and-mixin.scss';



/*
 * 1. Normal List Styling
 * 2. Normal Numbers Ordered List
 * 3. Custom Circle Icons Ordered List
 * 4. Big Numbers Ordered List
 * 5. Step Timeline By Numbers
 * 6. List With Icon
*/


/* 
 ---------------------------
 1. Normal List Styling
 ---------------------------
 */ 
 .rtl ol.poemkit-list--normal,
 .rtl ul.poemkit-list--normal,
 .rtl .poemkit-list--normal ul,
 .rtl .poemkit-list--normal ol {
	 
	 padding-left: auto;	
	 padding-right: 0.875rem;	
	 
 }
 
 
 
 
 /* 
  ---------------------------
  2. Normal Numbers Ordered List
  ---------------------------
  */ 
 
 .rtl ol.poemkit-list--numbered,
 .rtl .poemkit-list--numbered ol {
	 margin-left: auto;
	 margin-right: 1rem;
	 
	 > li {
		 margin-left: auto;
		 margin-right: .5rem;
	 }
 
	 > li::before {
		 left: auto;
		 right: -2.25em;
		 margin-right: auto;
		 margin-left: 0.5em;
		 
	 }	
	 
 }
 
 
 /* 
  ---------------------------
  3. Custom Circle Icons Ordered List
  ---------------------------
  */ 
 
 .rtl ol.poemkit-list--dot,
 .rtl ul.poemkit-list--dot,
 .rtl .poemkit-list--dot ol,
 .rtl .poemkit-list--dot ul {
	 margin-left: auto;
	 margin-right: 1rem;
	 
	 > li {
		 margin-left: auto;
		 margin-right: 1rem;
	 }
 
	 > li::before {
		 left: auto;
		 right: -1.5em;
		 
	 }
	 
 }
 
 
 /* 
  ---------------------------
  4. Big Numbers Ordered List
  ---------------------------
  */ 
 
 .rtl ol.poemkit-list--numbered-large,
 .rtl .poemkit-list--numbered-large ol {
 
	 
	 li {
		 padding-left: auto;
		 padding-right: 2.5rem;
		 margin-left: auto;
		 margin-right: 1.2rem;
		 
		 &::before {
			 margin-left: auto;
			 margin-right: -3.5rem;
		 }	
	 }	
 
 }
 
 .rtl ol.poemkit-list--numbered-large.poemkit-list--numbered-bg,
 .rtl .poemkit-list--numbered-large.poemkit-list--numbered-bg ol {
	
	 li {
		 margin-right: 0;
		 padding-right: 4.5rem;
		 
		 p {
			 padding-right: auto;
			 padding-left: 2rem;
		 }
		 
		 &::before {
			 margin-right: -4rem;
			 
		 }		
	 }
 
 }
 
 
 
 /* 
  ---------------------------
  5. Step Timeline By Numbers
  ---------------------------
  */ 
 $step-line-color: #333;
 
 .rtl .poemkit-list--numbered-step {
	 margin-left: auto;
	 margin-right: 1rem;
	 
	 li {
		 padding: 0 3.75rem 1.5rem 0;
		 border-left: none;
		 border-right: 2px solid $step-line-color;
	 
 
 
		 &::before {
			 left: auto;
			 right: -26px;
		 }
 
 
		 &:last-child {
			 border-right: none;
		 }
 
 
	 }
 
	 
 }
 
 
 
 @media all and (max-width:768px) {
 
	 .rtl .poemkit-list--numbered-step {
		 
		 li {
			 padding-right: 2.5rem;
		 }
		 
	 }
 
 }
 
 
 
 /* 
 ---------------------------
 6. List With Icon
 ---------------------------
 */ 
 .rtl .poemkit-list--icon {

	i {
		margin-right: auto;
		margin-left: .5rem;
	}
}
